<template>
  <div id="app">
    <h1>---------modules信息---------</h1>
    <h1>{{$store.state.a.name}}</h1>
    <button @click="updateData">修改名字</button>
    <h1>{{$store.getters.ageUpdate}}</h1>


    <h1>---------修改信息---------</h1>
    <h1>{{$store.state.info}}</h1>
    <button @click="updateInfo">修改信息</button>
    <h1>---------App组件---------</h1>
    <h1>{{$store.state.number}}</h1>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addFive(5)">+5</button>
    <button @click="subTen(10)">-10</button>
    <button @click="addStu">添加学生</button>
    <h1>---------HelloWorld组件---------</h1>
    <hello-vuex></hello-vuex>
    <h1>---------getter部分---------</h1>
    <h1>{{$store.getters.squareMethods}}</h1>
    <h1>{{$store.getters.moreFilter}}</h1>
    <h1>{{$store.getters.moreFilterLeg}}</h1>
    <h1>{{$store.getters.moreFilterAge(10)}}</h1>
    <router-view/>
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex";
import {DECREMENT, INCREMENT} from "./store/mutations-type";

export default {
  name: 'App',
  components: {
    HelloVuex
  },
  methods: {
    updateInfo() {
      // this.$store.dispatch('aUpDateInfo',{
      //   message: '我是携带的信息！',
      //   success: function () {
      //     console.log('里面已经完成了！')
      //   }
      // })
      this.$store.dispatch('aUpDateInfo','我是携带的信息！').then((data)=>{
        console.log(data);
        console.log('里面已经完成了！');
      })
    },
    add() {
      this.$store.commit(INCREMENT)
    },
    sub() {
      this.$store.commit(DECREMENT)
    },
    // addFive(number) {
    //   this.$store.commit('incrementFive',number);
    // },
    addFive(number) {
      this.$store.commit({
        type: 'incrementFive',
        count: number
      });
    },
    subTen(number) {
      this.$store.commit('decrementTen',number);
    },
    addStu() {
      const stu = {
        name: 'bi',
        age: 88,
        height: 100
      }
      this.$store.commit({
        type: 'incrementStu',
        stu: stu
      })
    },
    updateData() {
      // this.$store.commit('updateData','1111');
      this.$store.dispatch('aUpdateData','2222').then((data)=>{
        console.log(data);
      })
    }

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
